<template>
  <div class="lrzupcontent">
    <h5 class="content-header"> </h5>
    <div class="image-list">
        <input id="inpupimg" type="file"  accept="image/jpg,image/png,image/jpeg,image/gif"  @change="onFileChange" style="display: none;" multiple>
      <ul class="list-ul" >
        <li class="list-li " v-for="(iu, index) in imgUrls" :key="iu.index">
          <a class="list-link" >
            <img :src="iu">
          </a>
          <span class="list-img-close" @click='delImage(index)'></span>
        </li>
        <li class="list-li">
          <label for="inpupimg">上传图片</label>
        </li>
      </ul>
    </div>

    <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
  </div>
</template>
<script>

  export default {
    data: function () {
      return {
        imgUrls: []
      }
    },
    methods: {

      onFileChange: function (e) {
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length) return;
        this.createImage(files, e);
      },
      createImage: function (file, e) {
        let vm = this;
        lrz(file[0], {width: 480 })
        .then(function (rst) {
            vm.$http({
              url: vm.APIURL_PREFIX+'/uploadForCertificate',
              method : "post",
              data : rst.formData
            }).then((response) => {
                vm.imgUrls.push(rst.base64);
                console.log(response.data)
            }).catch(function(err){
                layer.msg("上传失败");
                console.log(err)
            });
            return rst;
        }).always(function () {
          e.target.value = null;
        });
      },
      delImage: function (index) {
        let vm = this;

        if(confirm("确定删除该图片？")){
          vm.imgUrls.splice(index, 1);
        }

      }
    }
  }
</script>
<style>
  /* ul li以横排显示 */

  /* 所有class为menu的div中的ul样式 */

  .lrzupcontent .list-ul {
    list-style: none;
    /* 去掉ul前面的符号 */
    margin: 0px;
    /* 与外界元素的距离为0 */
    padding: 0px;
    /* 与内部元素的距离为0 */
    width: auto;
    /* 宽度根据元素内容调整 */
  }

  /* 所有class为menu的div中的ul中的li样式 */

  .lrzupcontent .list-li {
    float: left;
    /* 向左漂移，将竖排变为横排 */
    padding: 8px;
    /* 与内部元素的距离为0 */
    display: inline-block;
    position: relative;
    text-align: center;
  }

  .lrzupcontent .list-link img {
    width: 100px;
    height: 100px;
  }

  /* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */

  .lrzupcontent .list-link a:visited {
    background-color: #465c71;
    /* 背景色 */
    border: 1px #4e667d solid;
    /* 边框 */
    color: #dde4ec;
    /* 文字颜色 */
    display: flex;
    /* 此元素将显示为块级元素，此元素前后会带有换行符 */
    line-height: 1.35em;
    /* 行高 */
    padding: 4px 20px;
    /* 内部填充的距离 */
    text-decoration: none;
    /* 不显示超链接下划线 */
    white-space: nowrap;
    /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
    overflow: hidden;
  }

  /* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */

  .lrzupcontent .list-link a:hover {
    background-color: #bfcbd6;
    /* 背景色 */
    color: #465c71;
    /* 文字颜色 */
    text-decoration: none;
    /* 不显示超链接下划线 */
  }

  /* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */

  .lrzupcontent .list-link a:active {
    background-color: #465c71;
    /* 背景色 */
    color: #cfdbe6;
    /* 文字颜色 */
    text-decoration: none;
    /* 不显示超链接下划线 */
  }

  .lrzupcontent .list-img-close {
    background: #ffffff url(../../assets/business/images/img1.png) no-repeat right top;
    border-color: #ff4a00;
    background-position: center;
    background-size: 35px 35px;
    display: block;
    float: left;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 5%;
    left: 71%;
    margin-top: 0px;
    margin-left: 0px;
    padding: 8px;
    z-index: 10;
    border-radius: 5px;
    text-align: center;
  }

  .add-img {
    display: block;
    background-image: url('../../assets/business/images/jia-icon.png');
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    background-position: center;
    background-size: 100px 100px;
  }
</style>
